<template>
  <div class="recommend" ref="recommend">
    <div class="recommend-content" ref="scroll" :data="discList">
      <div>
        <div class="slider-content">
          <div v-if="recommends.length" class="slider-wrapper">
            <slider>
              <div v-for="(item, index) in recommends" :key="index">
                <img :src="item.imageUrl" @load="imageLoad">
              </div>
            </slider>
          </div>
        </div>
        <div class="recommend-list">
          <h1 class="list-title">热门歌单推荐</h1>
          <ul class="discUl">
            <li v-for="item in discList" class="item" :key="item.id">
              <div class="icon">
                <div class="gradients"></div>
                <img :src="item.picUrl">
              </div>
              <p class="play-count">
                <i class="fa fa-headphones"></i>
                {{ Math.floor(item.playCount / 10000) }}万
              </p>
              <div class="text">
                <p class="name">{{item.name}}</p>
                <!-- <p class="disc"></p> -->
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
// import Scroll from '../../base/scroll/scroll'
// 获取轮播数据
import { getBanner, getDiscList } from '../../api/recommend'
// 200验证
import { ERR_OK } from '../../common/js/common'
// 获取轮播组件
import Slider from '../../base/slider/slider'
import { playlistMixin } from '@/common/js/mixin'
export default {
  mixins: [playlistMixin],
  data () {
    return {
      // 轮播歌数据
      recommends: [],
      // 歌曲数据
      discList: []
    }
  },
  methods: {
    // 获取轮播数据
    _getBanner () {
      getBanner().then((res) => {
        if (res.status === ERR_OK) {
          this.recommends = res.data.banners
          // console.log(this.recommends)
        }
        // if (res.status === ERR_OK) {
        //   // let list = res.data.banners.map((item) => {
        //   //   if (item.)
        //   // })
        //   let list = res.data.banners
        //   this.banner = list.splice(4)
        //   // console.log(this.banner)
        // } else {
        //   console.error('Banner 获取失败')
        // }
      })
    },
    _getDiscList () {
      getDiscList().then((res) => {
        if (res.status === ERR_OK) {
          this.discList = res.data.result
          console.log(this.discList)
        }
      })
    },
    // handlePlaylist (discList) {
    //   const bottom = discList.length > 0 ? '60px' : ''
    //   this.$refs.recommend.style.bottom = bottom
    //   this.$refs.scroll.refresh()
    // },
    imageLoad () {
      this.$emit('sss')
    },
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.recommend.style.bottom = bottom
      this.$refs.scroll.refresh()
    }
  },
  created () {
    this._getBanner()
    this._getDiscList()
  },
  components: {
    Slider
  }
}

</script>

<style lang="less" scoped>
@import '~@/common/stylus/variable.less';

.discUl {
  padding: 0;
}
.recommend-list {
  position: relative;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  .list-title {
    height: 52px;
    line-height: 52px;
    padding-left: 1.5%;
    font-size: @font-size-medium;
    text-align: left;
    font-weight: bold;
    color: @color-text;
  }
}
.item {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 33%;
  padding: 0 1%;
  .icon {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    .gradients {
      position: absolute;
      top: 0;
      width: 100%;
      height: 35px;
      border-radius: 3px;
      background: linear-gradient(rgba(109, 109, 109, 0.4),rgba(255, 255, 255, 0));
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
}
.play-count {
  position: absolute;
  margin-top: 6px;
  top: 5px;
  right: 8px;
  font-size: @font-size-small-s;
  color: @color-text-l
}
.text {
  margin: 1px;
  float: left;
  line-height: 20px;
  text-align: left;
  height: 42px;
  line-height: 15px;
  overflow: hidden;
  margin-bottom: 10px;
  font-size: @font-size-small;
  .name {
    margin: 0;
  }
}
</style>
